<template>
<div class="mainPage padding">
<div class="flex solid-bottom padding justify-start align-center text-center" style="color:white">
  <div class="padding-sm margin-xs radius">
  <img class="userinfo-avatar"  :src="userInfo.avatarUrl" background-size="cover"/>
  </div>
  <div class="padding-sm margin-xs radius text-xl">{{userInfo.nickName}}</div>
  <div class="padding-sm margin-xs radius">
    <picker class="weui-btn" @change="PickerChange" :value="indexPicker" :range="questionBank">
      <button class="cu-btn round line-yellow button-hover">{{questionBank[indexPicker]}}</button>
    </picker>
  </div>
</div>
        <div class="padding flex flex-direction text-center">
            <button class="cu-btn bg-mauve margin-tb-sm lg" @click="clickToChallenge">
              <span>挑战赛<br/>Ranked match</span>
            </button>
            <button class="cu-btn bg-mauve margin-tb-sm lg" @click="clickToFriend">
              <span>好友挑战<br/>challenge a friend</span>
            </button>
        </div>
</div>
</template>

<script>
import backgroundimg from '@/components/backgroundimg'
import card from '@/components/card'

export default {
  data () {
    return {
      userInfo: {
        nickName: '',
        avatarUrl: ''
      },
      isShow: false,
      indexPicker: 0,
      questionBank: ['一年级题库', '二年级题库', '三年级题库', '四年级题库', '五年级题库', '六年级题库']
    }
  },
  mounted () {
    this.setting()
  },
  methods: {
    bindgetuserinfo: function (e) {
      // const that = this
      console.log(e.mp.detail.rawData)
      if (e.mp.detail.rawData) {
        this.hasUserInfo = true
        this.setting()
        console.log('用户按了允许授权按钮')
      } else {
        console.log('用户按了拒绝按钮')
      }
    },
    setting () {
      const that = this
      wx.login({
        success (res) {
          if (res.code) {
            console.log('res.code+' + res.code)
            var rescode = res.code
            wx.getSetting({
              success (res) {
                if (res.authSetting['scope.userInfo']) {
                  wx.getUserInfo({
                    success: (res) => {
                      that.userInfo = res.userInfo
                      console.log(that.userInfo.nickName)
                      console.log(res)
                      wx.request({
                        url: process.env.BASE_API + '/wx/login',
                        method: 'POST',
                        header: {
                          'content-type': 'application/x-www-form-urlencoded'
                        },
                        data: {
                          code: rescode,
                          rawData: res.rawData,
                          signature: res.signature,
                          encrypteData: res.encrypteData,
                          iv: res.iv
                        },
                        success: function (res) {
                          if (res.data.status === 200) {
                            // 7.小程序存储skey（自定义登录状态）到本地
                            wx.setStorageSync('userInfo', res.data.userInfo)
                            wx.setStorageSync('skey', res.data.data)
                          } else {
                            console.log('服务器异常')
                          }
                        },
                        fail: function (error) {
                          console.log(error)
                        }
                      })
                    }
                  })
                }
              }
            })
          }
        }
      })
    },
    clickToChallenge () {
      const url = '../wait/main?nickName=' + this.userInfo.nickName + '&avatarUrl=' + this.userInfo.avatarUrl
      mpvue.navigateTo({url})
    },
    clickToFriend () {
      console.log(this.userInfo.avatarUrl)
      /*
      const url = '../waitFriends/main?nickName=' + this.userInfo.nickName + '&avatarUrl=' + this.userInfo.avatarUrl
      */
      const url = '../startPage/main?nickName=' + this.userInfo.nickName + '&avatarUrl=' + this.userInfo.avatarUrl
      mpvue.navigateTo({url})
    },
    PickerChange (e) {
      console.log('序号：' + e.mp.detail.value)
      console.log('选中的值为：' + this.questionBank[e.mp.detail.value])
      this.indexPicker = e.mp.detail.value
    }
  },
  components: {
    backgroundimg,
    card
  }
}
</script>

<style>
.mainPage{
    background: url("");
    background-size: 100% 100%;
    height:100%;
    width:100%;
    position: absolute;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.cu-btn.lg{
  height:200rpx;
  font-size: 40rpx;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.bg-mauve{
  background-color: rgb(55, 50, 107);
}
.padding{
  padding: 10rpx;
}
.padding-sm{
  padding: 5rpx;
}
</style>